<template>
  <div>
    <div class="video" id="videoReplay">
      <div id="Replaydragbar" class="Replaydragbar" v-show="dragbarShow"></div>
      <div class="closeimg" @click="closeVideoReplay" v-show="dragbarShow"><i class="V7_iconfont V7_iconV7tubiao_shanchumian" style="color: #737373;"></i></div>
      <video id="replayVideo" width="100%" height="auto" class="video_replay" :class="{maxvideo: videoMax}" autoplay>
        <source :src="replayUrl" />
      </video>
      <div class="controlBar">
        <div class="playControl">
          <!-- <span @click="fastOrBack('back')" class="backControl"><i class="V7_iconfont icon-shipinliaotianhoutui"></i></span> -->
          <span @click="playOrpause" class="pauseControl"><i class="V7_iconfont" :class="[isPlaying === true ? 'V7_iconV7tubiao_zanting' : 'V7_iconV7tubiao_bofang ']"></i></span>
          <!-- <span @click="fastOrBack('fast')" class="forwardControl"><i class="V7_iconfont icon-shipinliaotianqianjin"></i></span> -->
        </div>
        <div class="processControl">
          <span>{{currentTimeFormat}}</span>
          <div id="processBar" class="processBar">
            <div id="innerBar" class="innerBar"></div>
            <div id="currentTimePoint" class="currentTimePoint"></div>
          </div>
          <span style="margin-left: 6px">{{durationFormat}}</span>
        </div>
        <a :href="replayUrl" :download="replayUrl" target="_blank" class="download_btn"><span class="V7_iconfont V7_iconV7tubiao_daoru"></span></a>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
let tWidth: number
let tHeight: number
window.onresize = () => {
  tWidth = document.body.clientWidth
  tHeight = document.body.clientHeight
}
@Component({
  name: 'webchatVideo'
})
export default class WebchatVideo extends Vue {
  @Prop() private replayUrl: string | undefined
  @Prop() private chatMsg: any
  private dragbarShow = true

  private params: any = {
    left: 0,
    top: 0,
    currentX: 0,
    currentY: 0,
    flag: false
  }

  private dragWidth = 0

  private dragHeight = 0

  private isPlaying = true

  private durationFormat = ''

  private currentTimeFormat = ''

  private videoMax = false

  private maxVideoReplay () {
    this.videoMax = true
    const Video: any = document.getElementById('videoReplay')
    Video.style.left = '0'
    Video.style.top = '0'
    Video.style.width = window.innerWidth + 'px'
    Video.style.height = window.innerHeight + 'px'
  }

  private smallVideoReplay () {
    this.videoMax = false
    const Video: any = document.getElementById('videoReplay')
    Video.style.left = '28%'
    Video.style.top = '0'
    Video.style.width = '640px'
    Video.style.height = 'auto'
  }

  private processBarClick (e: any) {
    const video: any = document.getElementById('replayVideo')
    const barDom: any = document.getElementById('processBar')
    const barWidth = barDom.clientWidth
    const x = e.offsetX
    if (video.duration) {
      video.currentTime = (video.duration * x / barWidth).toFixed(0)
    }
  }

  private onTimeupdate () {
    if (!document.getElementById('replayVideo')) {
      return
    }
    const video: any = document.getElementById('replayVideo')
    const innerBar: any = document.getElementById('innerBar')
    const currentTimePoint: any = document.getElementById('currentTimePoint')
    let per
    const barDom: any = document.getElementById('processBar')
    const barWidth = barDom.clientWidth
    if (video.duration) {
      per = (video.currentTime / video.duration).toFixed(3)
    }
    innerBar.style.width = barWidth * per + 'px'
    currentTimePoint.style.left = barWidth * per - 4 + 'px'
    this.currentTimeFormat = this.videoTimeFormat(video.currentTime)
    this.durationFormat = this.videoTimeFormat(video.duration)
    if (video.ended) {
      this.isPlaying = false
    }
  }

  private fastOrBack (type: string) {
    const video: any = document.getElementById('replayVideo')
    const duration = video.duration
    if (type === 'fast') {
      video.currentTime += 10
      if (video.currentTime > duration) {
        video.currentTime = duration
      }
    } else if (type === 'back') {
      video.currentTime += -10
      if (video.currentTime < 0) {
        video.currentTime = 0
      }
    }
  }

  private playOrpause () {
    const video: any = document.getElementById('replayVideo')
    if (video.paused) {
      video.play()
      this.isPlaying = true
    } else {
      video.pause()
      this.isPlaying = false
    }
  }

  private closeVideoReplay () {
    this.$emit('closeVideoReplay')
  }

  private videoTimeFormat (time: any) {
    const timefix = time.toFixed(1)
    let hours: any = Math.floor(timefix / 3600)
    let minutes: any = Math.floor((timefix / 60) % 60)
    let seconds: any = Math.floor(timefix % 60)
    hours = hours < 10 ? '0' + hours : hours
    minutes = minutes < 10 ? '0' + minutes : minutes
    seconds = seconds < 10 ? '0' + seconds : seconds
    return hours + ':' + minutes + ':' + seconds
  }

  private getCss (o: any, key: any) {
    return o[key]
  }

  private startDrag (bar: any, target: any, self: any, callback?: any) {
    this.$nextTick(() => {
      bar.onmousedown = (event: any) => {
        event.preventDefault()
        if (self.getCss(target, 'offsetLeft') !== 'auto') {
          self.params.left = self.getCss(target, 'offsetLeft')
        }
        if (self.getCss(target, 'offsetTop') !== 'auto') {
          self.params.top = self.getCss(target, 'offsetTop')
        }
        self.params.flag = true
        if (!event) {
          event = window.event
          bar.onselectstart = () => {
            return false
          }
        }
        const e = event
        self.params.currentX = e.clientX
        self.params.currentY = e.clientY < 0 ? 0 : e.clientY
      }
      target.onmouseup = () => {
        self.params.flag = false
        if (self.getCss(target, 'offsetLeft') !== 'auto') {
          self.params.left = self.getCss(target, 'offsetLeft')
        }
        if (self.getCss(target, 'offsetTop') !== 'auto') {
          self.params.top = self.getCss(target, 'offsetTop')
        }
      }
      target.onmousemove = (event: any) => {
        const e: any = window.event
        const nowX = e.clientX
        const nowY = e.clientY
        let disX = 0
        let disY = 0
        if (self.params.flag) {
          disX = nowX - self.params.currentX
          disY = nowY - self.params.currentY
          // 判断上下左右的极限位置
          const limitLeft = (parseInt(self.params.left, 0) + disX) > (tWidth - 50) ? (tWidth - 50) : (parseInt(self.params.left, 0) + disX) < (100 - self.dragWidth) ? 100 - self.dragWidth : parseInt(self.params.left, 0) + disX
          const limitTop = (parseInt(self.params.top, 0) + disY) > (tHeight - 34) ? (tHeight - 34) : (parseInt(self.params.top, 0) + disY) < 0 ? 0 : parseInt(self.params.top, 0) + disY
          target.style.left = limitLeft + 'px'
          target.style.top = limitTop + 'px'
        }
        if (typeof callback === 'function') {
          // eslint-disable-next-line standard/no-callback-literal
          callback(parseInt(self.params.left, 0) + disX, parseInt(self.params.top, 0) + disY)
        }
      }
    })
  }

  private dragBarOver (self: any) {
    this.$nextTick(() => {
      const oContent: any = document.getElementById('videoReplay')
      oContent.onmouseover = () => {
        self.dragbarShow = true
      }
      oContent.onmouseout = () => {
        self.dragbarShow = false
      }
    })
  }

  private mounted () {
    this.$nextTick(() => {
      const oContent: any = document.getElementById('videoReplay')
      const videoReplay: any = document.getElementById('replayVideo')
      const processBar: any = document.getElementById('processBar')
      const oBar: any = document.getElementById('Replaydragbar')
      this.dragBarOver(this)
      this.startDrag(oBar, oContent, this)
      this.dragWidth = oContent.clientWidth
      this.dragHeight = oContent.clientHeight
      tWidth = document.body.clientWidth
      tHeight = document.body.clientHeight
      videoReplay.addEventListener('timeupdate', this.onTimeupdate)
      processBar.addEventListener('click', this.processBarClick)
    })
  }
}
</script>
<style lang='stylus' scoped>
  .video
    position absolute
    left 0px
    top 2%
    width 640px
    z-index 30000
    overflow hidden
    background #000000
    border-top-left-radius 5px
    border-top-right-radius 5px
    box-shadow 0 0 3px 2px rgba(53, 53, 53, 0.1)
    border-top-width 1px
    border-right-width 1px
    border-left-width 1px
    border-style solid solid none
    max-height calc(100vh - 50px)
    .headerBar
      position: absolute
      top: 0
      background-color: rgba(0, 0, 0, .4)
      width 100%
      height 60px
    .controlBar
      width 100%
      height 36px
      line-height 36px
      background-color #343434
      z-index 1
      margin-top -2px
      .playControl
        float left
        display inline-block
        height 100%
        text-align center
        span
          width 35px
          height 35px
          line-height 35px
          border-radius 50%
          font-size 20px
          cursor pointer
          display inline-block
          text-align center
        .pauseControl
          position relative
        .backControl, .forwardControl
          width 30px
          height 30px
          line-height 30px
        .backControl
          margin-right -7px
        .forwardControl
          margin-left -7px
      .processControl
        display inline-block
        width 80%
        color #fff
        font-size 14px
        margin-left 20px
        span
          display inline-block
        .processBar
          display inline-block
          position relative
          vertical-align middle
          width 68%
          top 1px
          height 4px
          background  #696969
          border-radius 2px
          cursor pointer
          margin 0 10px
          .innerBar
            width 0
            border-radius 2px
            height 4px
            filter blur(1px)
            background  $c-main
          .currentTimePoint
            width 10px
            height 10px
            top -4px
            background $c-main
            border-radius 50%
            border solid 1px #fff
            position absolute
            left 0
      .download
        float right
        margin-right 30px
        display inline-block
        width 5%
        color #fff
        font-size 14px
        text-align center
        .download_btn
          cursor pointer
          display inline-block
          border 1px solid $c-main
          border-radius 50%
          width 30px
          height 30px
          line-height 100%
          padding-top 4px
          box-sizing border-box
    .Replaydragbar
      width 100%
      height 80%
      opacity 0
      position absolute
      background-color #ffffff
      cursor move
      z-index 1
    .closeimg
      position absolute
      right 10px
      top 2%
      width 30px
      height 29px
      line-height 30px
      background-color white
      border-radius 50%
      text-align center
      cursor pointer
      z-index 2
      .V7_iconfont
        font-size 30px
  .videosmall
    width 120px
    height 90px
  .video_replay
    max-height calc(100vh - 150px)
  .maxvideo
    height calc(100vh - 52px)
    max-height 100%
  .V7_iconfont
    color #fff
</style>
